<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多方式登录系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #4e73df;
            --success: #1cc88a;
            --warning: #f6c23e;
            --danger: #e74a3b;
            --dark: #5a5c69;
            --light: #f8f9fc;
            --border: #dddfeb;
            --shadow: 0 0.15rem 1.75rem rgba(58, 59, 69, 0.15);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        body {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            padding: 20px;
        }

        .login-card {
            width: 100%;
            max-width: 900px;
            background: white;
            border-radius: 16px;
            box-shadow: var(--shadow);
            overflow: hidden;
            display: flex;
            min-height: 550px;
        }

        .hero-section {
            flex: 1;
            background: linear-gradient(135deg, #4776E6 0%, #8E54E9 100%);
            color: white;
            padding: 40px 30px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .hero-section::before {
            content: '';
            position: absolute;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: rgba(255,255,255,0.1);
            top: -100px;
            left: -100px;
        }

        .hero-section::after {
            content: '';
            position: absolute;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: rgba(255,255,255,0.07);
            bottom: -80px;
            right: -80px;
        }

        .hero-content {
            position: relative;
            z-index: 2;
        }

        .hero-content h2 {
            font-size: 32px;
            margin-bottom: 20px;
            font-weight: 700;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .hero-content p {
            font-size: 17px;
            opacity: 0.9;
            margin: 20px 0;
            line-height: 1.6;
            max-width: 90%;
            margin-left: auto;
            margin-right: auto;
        }

        .security-badge {
            background: rgba(255,255,255,0.15);
            padding: 15px;
            border-radius: 12px;
            margin-top: 25px;
            backdrop-filter: blur(5px);
        }

        .login-section {
            flex: 1;
            padding: 40px 35px;
            position: relative;
        }

        .login-header {
            margin-bottom: 30px;
            text-align: center;
        }

        .login-header h1 {
            color: var(--dark);
            font-size: 28px;
            margin-bottom: 8px;
            font-weight: 700;
        }

        .login-header p {
            color: #6e707e;
            font-size: 16px;
        }

        .login-tabs {
            display: flex;
            justify-content: center;
            margin-bottom: 25px;
            border-bottom: 1px solid var(--border);
        }

        .login-tab {
            padding: 14px 30px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            color: var(--dark);
            background: none;
            border: none;
            position: relative;
            transition: all 0.3s ease;
            border-radius: 6px 6px 0 0;
        }

        .login-tab:hover:not(.active) {
            color: var(--primary);
            background: rgba(78, 115, 223, 0.1);
        }

        .login-tab.active {
            color: var(--primary);
        }

        .login-tab.active:after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 3px;
            background: var(--primary);
        }

        .login-form {
            display: none;
            animation: fadeIn 0.4s ease;
        }

        .login-form.active {
            display: block;
        }

        .form-group {
            margin-bottom: 22px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: var(--dark);
            font-weight: 600;
            font-size: 14px;
            text-align: left;
        }

        .input-with-icon {
            position: relative;
        }

        .form-control {
            width: 100%;
            padding: 14px 18px;
            padding-left: 45px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 16px;
            transition: all 0.3s;
        }

        .form-control:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(78, 115, 223, 0.2);
            outline: none;
        }

        .input-icon {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #6e707e;
            font-size: 18px;
        }

        .login-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 5px;
        }

        .remember-me {
            display: flex;
            align-items: center;
        }

        .remember-me input {
            margin-right: 8px;
        }

        .forgot-password {
            color: var(--primary);
            text-decoration: none;
            font-size: 14px;
            transition: all 0.2s;
        }

        .forgot-password:hover {
            text-decoration: underline;
        }

        .btn {
            display: block;
            width: 100%;
            padding: 14px 20px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
        }

        .btn-login {
            background: var(--primary);
            color: white;
            margin-top: 20px;
            box-shadow: 0 4px 6px rgba(78, 115, 223, 0.3);
        }

        .btn-login:hover {
            background: #2e59d9;
            transform: translateY(-2px);
            box-shadow: 0 7px 14px rgba(78, 115, 223, 0.4);
        }

        .btn-send-code {
            background: white;
            color: var(--primary);
            border: 1px solid var(--primary);
            padding: 10px 15px;
            font-size: 14px;
            width: auto;
            min-width: 120px;
            border-radius: 6px;
        }

        .btn-send-code:hover {
            background: var(--primary);
            color: white;
        }

        .sms-input-group {
            display: flex;
            gap: 12px;
        }

        .sms-input-group .form-control {
            flex: 1;
            padding-left: 18px;
        }

        .qrcode-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px 0;
        }

        .qrcode-placeholder {
            width: 220px;
            height: 220px;
            background: #f8f9fc;
            border: 1px dashed #dddfeb;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 25px;
            transition: all 0.3s ease;
            overflow: hidden;
        }

        .qrcode-placeholder i {
            font-size: 50px;
            color: #b7b9cc;
        }

        .qrcode-placeholder img {
            max-width: 100%;
            height: auto;
        }

        .generate-btn {
            padding: 14px 30px;
            background: var(--success);
            color: white;
            font-weight: 600;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 16px;
            box-shadow: 0 4px 6px rgba(28, 200, 138, 0.3);
        }

        .generate-btn:hover {
            background: #17a673;
            transform: translateY(-3px);
            box-shadow: 0 7px 14px rgba(28, 200, 138, 0.4);
        }

        .generate-btn.loading {
            background: #b7b9cc;
            cursor: not-allowed;
        }

        .qrcode-instruction {
            text-align: center;
            color: var(--dark);
            margin-top: 20px;
            font-size: 14px;
            line-height: 1.5;
            background: #f8f9fc;
            padding: 12px 20px;
            border-radius: 8px;
            max-width: 300px;
        }

        .qrcode-instruction strong {
            color: var(--warning);
            font-weight: bold;
        }

        .social-login {
            margin-top: 30px;
            text-align: center;
        }

        .social-login p {
            color: var(--dark);
            font-size: 14px;
            margin-bottom: 15px;
            position: relative;
        }

        .social-login p:before,
        .social-login p:after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--border);
            position: absolute;
            top: 50%;
            width: 30%;
        }

        .social-login p:before {
            left: 0;
        }

        .social-login p:after {
            right: 0;
        }

        .social-icons {
            display: flex;
            justify-content: center;
            gap: 15px;
        }

        .social-icon {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .social-icon:hover {
            transform: translateY(-3px);
            box-shadow: 0 7px 14px rgba(0,0,0,0.15);
        }

        .icon-wechat {
            background: #1bc55e;
        }

        .icon-qq {
            background: #12b7f5;
        }

        .icon-weibo {
            background: #e6162d;
        }

        .footer-text {
            text-align: center;
            margin-top: 25px;
            color: var(--dark);
            font-size: 13px;
        }

        .footer-text a {
            color: var(--primary);
            text-decoration: none;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @media (max-width: 768px) {
            .login-card {
                flex-direction: column;
                max-width: 500px;
            }

            .hero-section {
                padding: 30px 20px;
            }

            .hero-content h2 {
                font-size: 26px;
            }

            .login-section {
                padding: 30px 25px;
            }

            .login-tab {
                padding: 12px 20px;
                font-size: 15px;
            }
        }

        @media (max-width: 480px) {
            .login-card {
                min-height: auto;
            }

            .login-tab {
                padding: 10px 15px;
                font-size: 14px;
            }

            .form-control {
                padding: 12px 15px;
                padding-left: 40px;
            }

            .input-icon {
                font-size: 16px;
            }

            .qrcode-placeholder {
                width: 200px;
                height: 200px;
            }
        }
    </style>
</head>
<body>
<div class="login-card">
    <div class="hero-section">
        <div class="hero-content">
            <h2>安全登录系统</h2>
            <p>全方位保障您的账户安全，多种登录方式满足不同场景需求</p>

            <div class="security-badge">
                <i class="fas fa-shield-alt" style="font-size: 32px; margin-bottom: 12px;"></i>
                <p>银行级安全加密技术<br>全面保护您的账户信息安全</p>
            </div>
        </div>
    </div>

    <div class="login-section">
        <div class="login-header">
            <h1>欢迎登录</h1>
            <p>请选择您喜欢的登录方式</p>
        </div>

        <div class="login-tabs">
            <button class="login-tab active" data-tab="account">账号登录</button>
            <button class="login-tab" data-tab="sms">短信登录</button>
            <button class="login-tab" data-tab="qrcode">扫码登录</button>
        </div>

        <!-- 账号登录表单 -->
        <div class="login-form active" id="account-form">
            <div class="form-group">
                <label for="username">用户名</label>
                <div class="input-with-icon">
                    <i class="fas fa-user input-icon"></i>
                    <input type="text" id="username" class="form-control" placeholder="请输入用户名">
                </div>
            </div>

            <div class="form-group">
                <label for="password">密码</label>
                <div class="input-with-icon">
                    <i class="fas fa-lock input-icon"></i>
                    <input type="password" id="password" class="form-control" placeholder="请输入密码">
                </div>
            </div>

            <div class="login-actions">
                <div class="remember-me">
                    <input type="checkbox" id="remember">
                    <label for="remember">记住我</label>
                </div>
                <a href="#" class="forgot-password">忘记密码?</a>
            </div>

            <button class="btn btn-login">立即登录</button>

            <div class="social-login">
                <p>其他登录方式</p>
                <div class="social-icons">
                    <div class="social-icon icon-wechat">
                        <i class="fab fa-weixin"></i>
                    </div>
                    <div class="social-icon icon-qq">
                        <i class="fab fa-qq"></i>
                    </div>
                    <div class="social-icon icon-weibo">
                        <i class="fab fa-weibo"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- 短信登录表单 -->
        <div class="login-form" id="sms-form">
            <div class="form-group">
                <label for="phone">手机号</label>
                <div class="input-with-icon">
                    <i class="fas fa-mobile-alt input-icon"></i>
                    <input type="tel" id="phone" class="form-control" placeholder="请输入手机号码">
                </div>
            </div>

            <div class="form-group">
                <label for="sms-code">验证码</label>
                <div class="sms-input-group">
                    <div class="input-with-icon" style="flex: 1;">
                        <i class="fas fa-sms input-icon"></i>
                        <input type="text" id="sms-code" class="form-control" placeholder="请输入验证码">
                    </div>
                    <button class="btn btn-send-code">获取验证码</button>
                </div>
            </div>

            <div class="login-actions">
                <div class="remember-me">
                    <input type="checkbox" id="sms-remember">
                    <label for="sms-remember">记住设备</label>
                </div>
            </div>

            <button class="btn btn-login">立即登录</button>

            <div class="social-login">
                <p>其他登录方式</p>
                <div class="social-icons">
                    <div class="social-icon icon-wechat">
                        <i class="fab fa-weixin"></i>
                    </div>
                    <div class="social-icon icon-qq">
                        <i class="fab fa-qq"></i>
                    </div>
                    <div class="social-icon icon-weibo">
                        <i class="fab fa-weibo"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- 扫码登录表单 -->
        <div class="login-form" id="qrcode-form">
            <div class="qrcode-container">
                <div class="qrcode-placeholder">
                    <i class="fas fa-qrcode"></i>
                </div>
                <button class="generate-btn" id="generateBtn">获取登录二维码</button>
                <div class="qrcode-instruction">
                    打开微信，点击"扫一扫"扫描二维码<br>
                    二维码有效时间：<strong>5分钟</strong>
                </div>
            </div>

            <div class="social-login">
                <p>其他登录方式</p>
                <div class="social-icons">
                    <div class="social-icon icon-wechat">
                        <i class="fab fa-weixin"></i>
                    </div>
                    <div class="social-icon icon-qq">
                        <i class="fab fa-qq"></i>
                    </div>
                    <div class="social-icon icon-weibo">
                        <i class="fab fa-weibo"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="footer-text">
            <p>© 2025 安全登录系统 | <a href="#">隐私政策</a> | <a href="#">用户协议</a></p>
        </div>
    </div>
</div>

<script>
    // 选项卡切换
    document.querySelectorAll('.login-tab').forEach(tab => {
        tab.addEventListener('click', () => {
            // 移除所有活动状态
            document.querySelectorAll('.login-tab').forEach(t => t.classList.remove('active'));
            document.querySelectorAll('.login-form').forEach(f => f.classList.remove('active'));

            // 添加当前活动状态
            tab.classList.add('active');
            document.getElementById(`${tab.dataset.tab}-form`).classList.add('active');
        });
    });

    // 生成二维码按钮（真实功能）
    document.getElementById('generateBtn').addEventListener('click', function(e) {
        window.location.href = "generateQrUrl";

        return;

        e.preventDefault();
        const btn = this;
        const placeholder = document.querySelector('.qrcode-placeholder');

        // 保存原始按钮文本
        const originalText = btn.innerHTML;

        // 显示加载状态
        btn.classList.add('loading');
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 生成中...';

        // 创建二维码容器
        placeholder.innerHTML = '<i class="fas fa-spinner fa-spin" style="color: var(--primary); font-size: 40px;"></i>';

        // 调用真实的后台接口获取二维码
        fetch('/generateQrUrl')
            .then(response => {
                if (!response.ok) {
                    throw new Error('获取二维码失败');
                }
                return response.json();
            })
            .then(data => {
                // 显示二维码
                placeholder.innerHTML = `<img src="${data.qrUrl}" alt="微信登录二维码">`;

                // 恢复按钮状态
                btn.classList.remove('loading');
                btn.innerHTML = originalText;

                // 更新提示文本
                document.querySelector('.qrcode-instruction').innerHTML =
                    "请使用微信扫描二维码登录<br>二维码有效时间：<strong>5分钟</strong>";

                // 开始倒计时
                startCountdown(5 * 60);
            })
            .catch(error => {
                console.error('二维码生成失败:', error);

                // 显示错误信息
                placeholder.innerHTML = '<div style="text-align: center; padding: 20px; color: var(--danger);">' +
                    '<i class="fas fa-exclamation-triangle" style="font-size: 40px; margin-bottom: 10px;"></i>' +
                    '<p>二维码生成失败</p></div>';

                // 恢复按钮状态
                btn.classList.remove('loading');
                btn.innerHTML = '重新生成';
            });
    });

    // 倒计时函数
    function startCountdown(seconds) {
        const instruction = document.querySelector('.qrcode-instruction');
        const placeholder = document.querySelector('.qrcode-placeholder');
        const btn = document.getElementById('generateBtn');

        let remaining = seconds;

        const timer = setInterval(() => {
            remaining--;

            const minutes = Math.floor(remaining / 60);
            const secs = remaining % 60;

            instruction.innerHTML =
                `请使用微信扫描二维码登录<br>二维码有效时间：<strong>${minutes}:${secs < 10 ? '0' + secs : secs}</strong>`;

            if (remaining <= 0) {
                clearInterval(timer);
                instruction.innerHTML =
                    '二维码已过期，请点击下方按钮重新生成';

                // 显示过期状态
                placeholder.innerHTML = '<div style="text-align: center; padding: 20px; color: var(--warning);">' +
                    '<i class="fas fa-hourglass-end" style="font-size: 40px; margin-bottom: 10px;"></i>' +
                    '<p>二维码已过期</p></div>';

                // 恢复按钮文本
                btn.innerHTML = '重新生成二维码';
            }
        }, 1000);
    }

    // 模拟发送验证码按钮
    document.querySelector('.btn-send-code').addEventListener('click', function(e) {
        e.preventDefault();
        const button = this;
        let countdown = 60;

        button.disabled = true;
        button.textContent = `${countdown}秒后重发`;

        const timer = setInterval(() => {
            countdown--;
            button.textContent = `${countdown}秒后重发`;

            if (countdown <= 0) {
                clearInterval(timer);
                button.disabled = false;
                button.textContent = '获取验证码';
            }
        }, 1000);
    });

    // 模拟登录按钮
    document.querySelectorAll('.btn-login').forEach(btn => {
        btn.addEventListener('click', function() {
            const originalText = this.innerHTML;

            // 添加加载效果
            this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 登录中...';
            this.disabled = true;

            // 模拟登录请求
            setTimeout(() => {
                this.innerHTML = '<i class="fas fa-exclamation-triangle"></i> 登录接口未实现';
                this.style.background = 'var(--danger)';
                this.disabled = false;

                // 恢复原始状态
                setTimeout(() => {
                    this.innerHTML = originalText;
                    this.style.background = 'var(--primary)';
                }, 3000);
            }, 1500);
        });
    });
</script>
</body>
</html>